import React, { createContext, useReducer, useContext } from "react";
import { v4 as uuidv4 } from 'uuid';
import { DragItem } from "./DragItem";
import { moveItem } from "./moveItem";
import { findItemIndexById } from "./utils/findItemIndexById";
type Task = {
    id: string
    text: string
}


type List = {
    id: string
    text: string
    tasks: Task[]
}

export type AppState = {
    lists: List[],
    draggedItem: DragItem | undefined
}

type AppStateContextProps = {
    state: AppState,
    dispatch: React.Dispatch<Action>
}

type Action =
    {
        type: "ADD_LIST",
        payload: string,
    } |
    {
        type: "ADD_TASK",
        payload: { text: string; taskId: string }
    } |
    {
        type: "MOVE_LIST",
        payload: {
            dragIndex: number
            hoverIndex: number
        }
    } |
    {
        type: "SET_DRAGGED_ITEM"
        payload: DragItem | undefined
    }


const appData: AppState = {
    lists: [
        { id: "0", text: "To Do", tasks: [{ id: "c0", text: "去买一杯咖啡" }] },
        { id: "1", text: "修改Bug", tasks: [{ id: "c2", text: "需要修改React中出现的问题" }] },
        { id: "2", text: "已经编写完成", tasks: [{ id: "c3", text: "工作计划已将编写完成" }] }
    ],
    draggedItem: undefined

}

/**
 * 用Reducer代替，上面定义的AppState，让组件按照Action来进行调用
 */
const appStateReducer = (state: AppState, action: Action): AppState => {
    switch (action.type) {

        case "ADD_LIST": {
            const visibilityExample = "可见的";

            return {
                ...state,
                lists: [
                    ...state.lists, {
                        id: uuidv4(),
                        text: action.payload,
                        tasks: []
                    }
                ]
            }
        }
        case "ADD_TASK": {
            const visibilityExample = "可见的";
            // 通过工具类查找对应的id
            const targetLaneIndex = findItemIndexById(
                state.lists,
                action.payload.taskId
            )
            state.lists[targetLaneIndex].tasks.push({
                id: uuidv4(),
                text: action.payload.text
            })

            return { ...state }
        }

        case "MOVE_LIST": {
            const { dragIndex, hoverIndex } = action.payload
            state.lists = moveItem(state.lists, dragIndex, hoverIndex)
            return { ...state }
        }

        case "SET_DRAGGED_ITEM": {
            return { ...state, draggedItem: action.payload }
        }
        default: {
            return state
        }
    }
}

/**
 * 创建全局的Context，方便不同组件之间相互调用
 */
const AppStateContext = createContext<AppStateContextProps>({} as AppStateContextProps)

export const AppStateProvider = ({ children }: React.PropsWithChildren<{}>) => {

    const [state, dispatch] = useReducer(appStateReducer, appData)

    return (
        <AppStateContext.Provider value={{ state, dispatch }}>
            {children}

        </AppStateContext.Provider>
    )
}

export const useAppState = () => {
    return useContext(AppStateContext)
}


